﻿var index=function(){
 new Ext.Viewport({
    layout: 'border',
    items: [{
        region: 'north',
        html: '<h1 class="x-panel-body header">This is the TeamPower Project Header</h1>',
        autoHeight: true,
       border: false,
       margins: '0 0 5 0'
    }, {
        region: 'west',
        collapsible: true,
        title: 'Navigation',
        xtype: 'treepanel',
        width: 200,
        autoScroll: true,
        animate : true, 
        root:{
        	nodeType: 'async',
        	expand:true
        	},
        dataUrl: 'function_list.json',
        listeners: {
            click: function(n) {
               if(n.attributes.leaf && !Ext.getCmp(n.attributes.id)){
               	  Ext.getCmp('mainTabpanel').add({
               	  	  id:n.attributes.id,
               	  	  title:n.attributes.text,
               	  	  closable:true,
               	  	  autoLoad:{
               	  	  	  url:n.attributes.url,
               	  	  	  scripts: true,
               	  	  	  scope: this,
               	  	  	  nocache: true
               	  	  	}
               	  	});
               	}
               	Ext.getCmp('mainTabpanel').setActiveTab(Ext.getCmp(n.attributes.id));
            }
        }
    }, {
        region: 'center',
        xtype: 'tabpanel',
        id:'mainTabpanel',
        activeItem:0,
        items: {
            title: 'Index',
            html: 'This is the index page'
        }
    }, {
        region: 'south',
        title: 'Information',
        collapsible: true,
        html: 'Information goes here',
        height: 100,
        minHeight: 100
    }]
});}
function getDiv(id) {
      var t = document.getElementById(id)
      return t.id=Ext.id();
	}